<template>
  <div class="bju">
    <el-row :gutter="8">
      <el-col :span="6">
        <el-card v-if="role==='3'" shadow="hover" @click.prevent.stop.native="toShangbao('/thingtj')">
          <div class="cleft">
            <img src="./zongtong.png" style="height: 56px" alt="图标加载失败">
            <div class="mingc">事件总量统计</div>
          </div>
          <div class="cright">
            <div>37种不良事件提交总量统计分析</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card v-if="role==='3'" shadow="hover" @click.prevent.stop.native="toShangbao('/keshitj')">
          <div class="cleft">
            <img src="./keshitong.png" style="height: 56px" alt="图标加载失败">
            <div class="mingc">科室上报统计</div>
          </div>
          <div class="cright">
            <div>全部科室上报的事件总量统计分析</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card v-if="role!=='3'" shadow="hover" @click.prevent.stop.native="toShangbao('/rentj')">
          <div class="cleft">
            <img src="./rentongji.png" style="height: 56px" alt="图标加载失败">
            <div class="mingc">人员上报统计</div>
          </div>
          <div class="cright">
            <div>个人上报的事件总量统计分析</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: '',
    }
  },
  mounted() {
    if (this.$store.state.user.roles.indexOf('statistician') > -1) {
      this.role = '3';
    } else {
      this.role = '1';
    }
  },
  methods: {
    toShangbao(path) {
      this.$router.push({path: path})
    }
  }
}
</script>

<style lang="scss" scoped>

.bju {
  width: 96%;
  margin-top: 1.5%;
  margin-left: 2%;
  margin-right: 2%;

  ::v-deep .el-card {
    display: inline-block;
  }

  ::v-deep .el-card__body {
    padding: 20px 20px 20px 20px;
    height: 120px;
    width: 362px;
  }
}

.cleft {
  width: 43%;
  float: left;
  margin-right: 3%;
  text-align: center;
  color: black;
}

.mingc {
  font-size: 16px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  cursor: default;
  color: black;
}

.cright {
  width: 54%;
  float: right;
  cursor: default;
  color: black;
}

</style>
